<template>
  <div>
    <el-dialog title="图片上传" :visible.sync="dialogVisible" width="30%">
      <div class="header">
        <el-form
          ref="form"
          :label-position="labelPosition"
          :model="form"
          label-width="80px"
        >
          <el-row>
            <el-col :span="15">文件名称（支持"svg","jpg","jpeg","png"）</el-col>
            <el-col :span="9">大小</el-col>
          </el-row>
          <el-row>
            <el-col :span="15">
              <el-upload
                class="upload-demo"
                drag
                :data="data"
                :action="baseURL + '/enterprise/file/upload'"
                :headers="header"
                :on-success="handleAvatarSuccess"
                :limit="1"
                :before-upload="beforeAvatarUpload"
              >
                <i class="el-icon-upload" />
                <div class="el-upload__text">
                  <em>点击上传</em>
                </div>
              </el-upload>
            </el-col>
            <el-col :span="9"> {{ imgSize }}</el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" :plain="true" @click="submit"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-button v-if="false" :plain="true" @click="open2">成功</el-button>
    <el-button v-if="false" :plain="true" @click="opens">成功</el-button>
  </div>
</template>
<script>
import { getToken } from '@/utils/auth'
import { updateelectric } from '@/api/siteFile'

export default {
  props: ['ids', 'edits'],
  data() {
    return {
      dialogVisible: false,
      labelPosition: 'right',
      showMapComponent: false,
      data: {
        directory: 'planFile',
        name: '',
      },
      // upload 传参
      header: {
        Authorization: 'Bearer ' + getToken(),
        Lang: 'zh-CN',
      },
      imgSize: '',
      baseURL: process.env.VUE_APP_BASE_API,
      form: {
        file: '',
        name: '',
        directory: '',
      },
    }
  },

  created() {},
  mounted() {},
  methods: {
    open() {
      this.dialogVisible = true
    },
    open2(msg) {
      this.$message({
        message: msg,
        type: 'success',
      })
    },
    opens() {
      this.$notify({
        title: '警告',
        message: '请选择图片',
        type: 'warning',
      })
    },
    submit() {
      this.edits.voltage_level = this.edits.voltage_level.substring(
        0,
        this.edits.voltage_level.length - 2
      )
      this.dialogVisible = false
      updateelectric(this.edits).then((res) => {
        if (res.code == 200) {
          this.open2('上传成功')
          this.$emit('getAll')
        }
      })
    },
    // 文件上传
    handleAvatarSuccess(res, file) {
      console.log('文件', res.data)
      this.imgSize = parseInt(file.size / 1024)
      this.edits.images = res.data.realPath

      // this.form.file = URL.createObjectURL(file.raw)
    },

    beforeAvatarUpload(file) {
      const isJPG1 = file.type === 'image/jpeg'
      const isJPG2 = file.type === 'image/gif'
      const isJPG3 = file.type === 'image/png'
      const isJPG4 = file.type === 'image/jpg'
      const isJPG = isJPG1 || isJPG2 || isJPG3 || isJPG4
      const isLt2M = file.size < 71680
      // this.goodsIdStr.goodsId = this.form.goodsId // 利用goodsIdStr传参，用于后台命名，如果命名不需要传参可以省略
      if (!isJPG) {
        this.$message.error('只能上传图片格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 70KB,请调整清晰度之后再试！')
      }
      return isJPG && isLt2M
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep.el-col {
  height: 50px;
  text-align: center;
  line-height: 50px;
  border: 1px solid #eee;
}
::v-deep.el-upload-dragger {
  height: 33px;
  width: 90px;
  line-height: 33px;
  position: relative;
  top: 9px;
}
::v-deep.el-icon-upload {
  display: none;
}
</style>
